<template>
	<v-container fill-height fluid grid-list-xl>
		<v-layout justify-center wrap>
			<v-flex xs4 md4>
				<v-alert :value="alert" type="error" transition="scale-transition">
					{{message}}
				</v-alert>
				<material-card color="green" title="登录">
					<v-form :model="form" @keydown.enter.native="login">
						<v-container py-0>
							<v-layout wrap>
								<v-flex xs12 md12>
									<v-text-field label="手机号" class="purple-input" prepend-icon="mdi-account" v-model="form.username" @input="blur">
									</v-text-field>
								</v-flex>
								<v-flex xs12 md12>
									<v-text-field label="密码" class="purple-input" prepend-icon="mdi-account-key" type="password" v-model="form.password" @input="blur" />
								</v-flex>
								<v-flex xs12 text-xs-right>
									<v-btn class="mx-0 font-weight-light" color="success" @click="login">
										登录
									</v-btn>
								</v-flex>
							</v-layout>
						</v-container>
					</v-form>
				</material-card>

			</v-flex>
		</v-layout>

	</v-container>
</template>

<script>
	import oauth from '@/utils/oauth'
	import axios from '@/utils/http'
	import path from '@/paths/auth'
	import { mapMutations } from 'vuex'

	export default {
		name: 'login',
		data() {
			return {
				form: {
					username: 'test',
					password: '123456'
				},
				alert: false,
				message: null
			}
		},
		methods: {
			...mapMutations('auth',['addAccount']),
			...mapMutations('user',['addUserInfo']),
			login: async function() {
				try {
					const result = await oauth.oauth2Http(path.PATH_LOGIN,
						'password', 'mobile-client', 'mobile', this.form.username, this.form.password);
					let authInfo = JSON.stringify(result);
					sessionStorage.setItem("authInfo",authInfo);
					await this.addAccount(authInfo); // {#}
					const userData = await axios.getRequest(path.PATH_CURR_USER_INFO);
					let userInfo = JSON.stringify(userData);
					this.addUserInfo(userInfo); // {#}
					this.$router.push({
						name: "main/Main"
					})
				} catch(e) {
					this.alert = true;
					this.message = '账号或者密码错误';
				}

			},
			blur: function() {
				this.alert = false;
				this.message = null;
			}
		}
	}
</script>
